<template>
  <div class="footer-bar">
    <div class="footer-container">
      <div class="footer_bd">
        <div class="ft-left">
          <div class="ft-main-title">进入安德的世界</div>
          <div class="ft-action">
            <div class="ft-action-main">
              <input type="text" placeholder="输入您的电子邮件地址 *" class="ft-action-input" @keyup.enter="onSubmit" v-model="email">
              <div class="action-btn hv-opacity" @click="onSubmit">
                <i class="iconfont icon-arr_thin"></i>
              </div>
            </div>
            <div class="ft-agree">
              <div class="agree-checkbox flex-center hv-opacity" :class="{'checked': agreement}" @click="agreement = !agreement">
                <i class="iconfont icon-checked"></i>
              </div>
              <div class="agree-label">我已阅读并同意安德集团<a href="privacy.html" class="hv-opacity">隐私政策</a>和<a href="privacy.html" class="hv-opacity">Cookie政策</a>，并同意接收独家活动、产品系列及最新资讯。</div>
            </div>
          </div>
          <div class="ft-media">
            <div class="ft-media-title">关注我们</div>
            <div class="ft-media-list">
              <a :href="item.url || 'javascript:;'" class="ft-media-item" v-for="(item, index) in mediaList" :key="index" :title="item.title">
                <!-- <img oncontextmenu="return false" src="@/assets/images/media/media_weibo.svg" alt=""> -->
                <img oncontextmenu="return false" :src="item.photo" class="icon hv-opacity">
                <div class="link-popup" v-if="item.type == 2">
                  <img oncontextmenu="return false" :src="item.qr" alt="" class="link-photo">
                  <div class="link-tips">{{ item.title }}</div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="ft-right">
          <div class="ft-nav">
            <div class="ft-nav-title">探索精彩安德</div>
            <div class="ft-links">
              <a href="about.html" class="ft-nav-item hv-opacity">安德简介</a>
              <a href="about.html?position=2" class="ft-nav-item hv-opacity">企业理念</a>
              <a href="about.html?position=4" class="ft-nav-item hv-opacity">发展历程</a>
              <a href="about.html?position=5" class="ft-nav-item hv-opacity">企业荣誉</a>
              <a href="founder.html" class="ft-nav-item hv-opacity">创始人故事</a>
              <a href="news.html" class="ft-nav-item hv-opacity">新闻资讯</a>
            </div>
          </div>
          <div class="ft-nav">
            <div class="ft-nav-title">安德集团产业</div>
            <div class="ft-links">
              <a href="industry.html?type=1" class="ft-nav-item hv-opacity">安德电器</a>
              <a href="industry.html?type=2" class="ft-nav-item hv-opacity">安德电机</a>
              <a href="industry.html?type=3" class="ft-nav-item hv-opacity">百洛电器</a>
              <a href="industry.html?type=5" class="ft-nav-item hv-opacity">待补充预留</a>
              <a href="industry.html?type=4" class="ft-nav-item hv-opacity">中科智能</a>
            </div>
          </div>
          <div class="ft-nav">
            <div class="ft-nav-title">发现安德实力</div>
            <div class="ft-links">
              <a href="technology.html" class="ft-nav-item hv-opacity">设计理念</a>
              <a href="randd.html" class="ft-nav-item hv-opacity">研发实力</a>
              <a href="randd.html" class="ft-nav-item hv-opacity">专利领域</a>
              <a href="manufacture.html" class="ft-nav-item hv-opacity">生产基地</a>
              <a href="industry.html?type=4" class="ft-nav-item hv-opacity">智能制造</a>
            </div>
          </div>
          <div class="ft-nav">
            <div class="ft-nav-title">商业招商合作</div>
            <div class="ft-links">
              <a href="business.html?position=1" class="ft-nav-item hv-opacity">供应商合作</a>
              <a href="business.html?position=2" class="ft-nav-item hv-opacity">品牌加盟合作</a>
              <a href="business.html?position=3" class="ft-nav-item hv-opacity">ODM/OEM合作</a>
            </div>
          </div>
          <div class="ft-nav">
            <div class="ft-nav-title">安德品牌布局</div>
            <div class="ft-links">
              <a href="brand.html" class="ft-nav-item hv-opacity">品牌布局概述</a>
              <a href="brand.html" class="ft-nav-item hv-opacity">Arda品牌官网</a>
              <a href="brand.html" class="ft-nav-item hv-opacity">Bravo海外官网</a>
              <a href="brand.html" class="ft-nav-item hv-opacity">Norge品牌官网</a>
              <a href="brand.html" class="ft-nav-item hv-opacity">Rangeair官网</a>
            </div>
          </div>
        </div>
      </div>
      <div class="footer__ft flex-between">
        <div class="ft-section">
          <a href="map.html" clas="ft-link hv-opacity">网站地图</a><span class="sp">|</span>
          <a href="legal.html" clas="ft-link hv-opacity">法律声明</a><span class="sp">|</span>
          <a href="privacy.html" class="ft-link hv-opacity">隐私条款</a><span class="sp">|</span>
          <a href="javascript:;" class="ft-link hv-opacity">©2019-2025 安德集团</a><span class="sp">|</span>
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="ft-link hv-opacity">沪ICP备14023503号-1</a><span class="sp">|</span>
          <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" class="ft-link hv-opacity">沪公网安备31010702005356号</a>
        </div>
        <a href="javascript:;" class="ft-lg hv-opacity">
          <span class="label">中国大陆 (简体中文) </span>
          <img src="@/assets/images/icon_global_white.svg" alt="" class="icon">
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { checkEmailFormat } from '@/utils/utils';
  import { submitEmail, getMediaList } from '@/api/common'

  const agreement = ref(false);
  const email = ref('');
  const mediaList = ref([]);

  onMounted(() => {
    getMediaList().then(res => {
      mediaList.value = res.data.list
    })
  })
  const onSubmit = () => {
    if (email.value.trim() === '') {
      alert('请输入邮箱')
      return
    }
    if (!checkEmailFormat(email.value)) {
      alert('请输入正确的邮箱')
      return
    };
    if (!agreement.value) {
      alert('请勾选隐私政策类似的文案')
      return
    }
    const params = {
      email: email.value
    }
    submitEmail(params).then(res => {
      alert('提交成功')
      email.value = ''
    }).catch(err => {
      alert('您好！检测到您已成功绑定邮箱，无需重复操作')
    })
  };
</script>


<style lang="scss">
  .footer-bar {
    background: #000000;
    padding: 3.75rem /* 60/16 */ 10rem /* 160/16 */ 1.6875rem /* 27/16 */;
    width: 100%;
    margin: 0 auto;
  }
  .footer__ft {
    padding-top: 1.375rem /* 22/16 */;
    border-top: 1px dashed #595757;
    margin-top: 3.125rem /* 50/16 */;
    .ft-lg {
      font-size: .75rem /* 12/16 */;      
      color: #D3D3D3;
      display: flex;
      align-items: center;
      .icon {
        margin-left: .625rem /* 10/16 */;
        width: 1.25rem /* 20/16 */;
        height: 1.25rem /* 20/16 */;
        line-height: 1;
      }
    }
  }
  .ft-section {
    flex: 1;
    width: 0;
    margin-right: 2.5rem /* 40/16 */;
    a {
      font-size: .75rem /* 12/16 */;      
      color: #D3D3D3;
    }
    .sp {
      font-size: .75rem /* 12/16 */;   
      color: #D3D3D3;
      margin: 0 .625rem /* 10/16 */;
    }
  }
  .footer_bd {
    display: flex;

  }
  .ft-left {
    width: 25%;
  }
  .ft-main-title {
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: .02em;
    font-weight: 500;
  }
  .ft-action {
    margin-top: 1.125rem /* 18/16 */;
  }
  .ft-action-main {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    height: 2.3125rem /* 37/16 */;
    border-bottom: 1px solid #FFFFFF;
  }
  .ft-action-input {
    flex: 1;
    width: 0;
    height: 2.3125rem /* 37/16 */;
    color: #FFFFFF;
    padding: 0 ;
    background: transparent;
    outline: none;
    border: none;
    &::placeholder {
      color: rgba(255,255,255,.5);
    }
  }
  .action-btn {
    margin-left: .625rem /* 10/16 */;
    .iconfont {
      font-size: 1rem /* 16/16 */;
      color: #FFFFFF;
    }
  }
  .ft-agree {
    display: flex;
    align-items: center;
    margin-top: 1.125rem /* 18/16 */;
    .agree-checkbox {
      width: 1.375rem /* 22/16 */;
      height: 1.375rem /* 22/16 */;
      border-radius: 1px;
      border: 1px solid #FFFFFF;
      &.checked {
        border-color: #E50012;
        background: #E50012;
        .iconfont {
          display: block;
        }
      }
      .iconfont {
        display: none;
        color: #FFFFFF;
        font-size: 1rem /* 16/16 */;
      }
    }
    .agree-label {
      flex: 1;
      width: 0;
      margin-left: .625rem /* 10/16 */;
      font-size: .625rem /* 10/16 */;
      line-height: 1.4;
      letter-spacing: .02em;
      color: #FFFFFF;
      a {
        color: #FFFFFF;
        // text-decoration: underline;
        border-bottom: 1px solid #FFFFFF;
      }
    }
  }
  .ft-right {
    flex: 1;
    width: 0;
    margin-left: 8.75rem /* 140/16 */;
    display: flex;
    justify-content: space-between;
  }
  .ft-media {
    margin-top: 2.9375rem /* 47/16 */;
    
  }
  .ft-media-title {
    font-size: .875rem /* 14/16 */;
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
  }
  .ft-media-list {
    margin-top: 1.25rem /* 20/16 */;
    display: flex;
    align-items: center;
    .ft-media-item {
      position: relative;
      &+.ft-media-item {
        margin-left: 1.5rem /* 24/16 */;
      }
      .icon {
        width: auto;
        height: 1.25rem /* 20/16 */;
      }
      &:hover {
        .link-popup {
          display: block;
        }
      }
    }
   
  }
  .link-popup {
    position: absolute;
    bottom: 2.625rem /* 42/16 */;
    left: 0;
    width: 8.375rem /* 134/16 */;
    padding: .5625rem /* 9/16 */ .5rem /* 8/16 */;
    background: #FFFFFF;
    border-radius: 4px;
    display: none;
    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: .5625rem /* 9/16 */ solid #FFFFFF;
      border-left: .625rem /* 10/16 */ solid transparent;
      border-right: .625rem /* 10/16 */ solid transparent;
      position: absolute;
      bottom: -.5rem /* 8/16 */;
      left: .3125rem /* 5/16 */;
    }
    .link-photo {
      width: 100%;
    }
    .link-tips {
      margin-top: .5625rem /* 9/16 */;
      color: #333333;
      font-size: .6875rem /* 11/16 */;
      line-height: 1;
      text-align: center;
    }
  }
  .ft-nav {

  }
  .ft-nav-title {
    color: #FFFFFF;
    font-weight: 500;
    font-size: .875rem /* 14/16 */;
    line-height: 1;
  }
  .ft-links {
    margin-top: 1.375rem /* 22/16 */;
    .ft-nav-item {
      display: block;
      font-size: .75rem /* 12/16 */;
      line-height: 1;
      color: #BBBBBB;
      &+.ft-nav-item {
        margin-top: 1.125rem /* 18/16 */;
      }
    }
  }
</style>